<template>
  <div class="tab">
    <!-- 会员抢券（显示条件：类型不是2） -->
    <a @click="goTo(1)" v-if="!isover">
      <img :src="active == 1 ? tab1_active: tab1" alt="">
      <div :class="active == 1 ? 'active': ''">会员抢券</div>
    </a>
    
    <!-- 商户核销（仅类型0可见） -->
    <a @click="goTo(2)" v-if="type === '0'">
      <img :src="active == 2 ? tab2_active: tab2" alt="">
      <div :class="active == 2 ? 'active': ''">商户核销</div>
    </a>
    
    <!-- 市总管理（仅类型2可见） -->
    <a @click="goTo(3)" v-if="type === '2'">
      <img :src="active == 3 ? tab3_active: tab3" alt="">
      <div :class="active == 3 ? 'active': ''">市总管理</div>
    </a>
    
    <!-- 我的消费券（始终显示） -->
    <a @click="goTo(4)">
      <img :src="active == 4 ? tab4_active: tab4" alt="">
      <div :class="active == 4 ? 'active': ''">我的礼券</div>
    </a>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

// 修改为正确的图片路径，例如：
import tab1 from '../assets/img/tab/1.png'
import tab2 from '../assets/img/tab/2.png'
import tab3 from '../assets/img/tab/3.png'
import tab4 from '../assets/img/tab/4.png'
import tab1_active from '../assets/img/tab/1_active.png'
import tab2_active from '../assets/img/tab/2_active.png'
import tab3_active from '../assets/img/tab/3_active.png'
import tab4_active from '../assets/img/tab/4_active.png'

// 新增用户类型判断
const type = ref(localStorage.getItem('type'))

defineProps({
  active: String,
  isover: Boolean
})
const goTo = (active) => {
  console.log(active)
  switch (active) {
    case 1:
      router.push('/scrape')
      break;
    case 2:
      router.push('/merchant')
      break;
    case 3:
      router.push('/statistics')
      break;
    case 4:
      router.push('/coupon')
      break;
  }
}


onMounted(() => {
  
})

const count = ref(0)
</script>
<style lang="less">
.tab {
  height: 60px;
  background-color: #fff;
  border-radius: 20px 20px 0 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 12px;
  color: #333;
  a{
    display: block;
    text-align: center;
    color: #333;
  }
  img {
    width: 22px;
  }
}
.active{
  color: #EE5143;
}
</style>